
  <form class="form-horizontal">
    <div class="box-body">
      <div class="form-group">
        <label class="col-sm-2 control-label">模板名称：</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">模板描述：</label>
        <div class="col-sm-10">
          <input type="email" class="form-control" id="inputEmail3" placeholder="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">消息类型：</label>
        <div class="col-sm-10">
          <select class="form-control select2" id='select2' style="width: 100%;">
           <option value="0">短信</option>
                  <option value="1">手机通知</option>                  
                  </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">可选模板参数：</label>
        <div class="col-sm-10">
          <div class="theTarea" id="theTarea">
            
          </div>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">消息内容：</label>

        <div class="col-sm-10">
          <textarea class="textarea" id="textarea" style="width:90%; height:125px;" placeholder="">营业厅名称：[营业厅名称]，设备编号：[设备编号]，工单级别：[工单级别]，创建时间：[创建时间][创建时间][创建时间][创建时间]</textarea>
        </div>
      </div>
     
    </div>
  </form>  
 
<script>



 var mbhtml = '<span data-mb="{minfdsfds.fsdafsa}">[营业厅名称]</span>'
            +'<span data-mb="{minfdsfds.fsdafsa}">[设备编号]</span>'
            +'<span data-mb="{minfdsfds.fsdafsa}">[工单级别]</span>'
            +'<span data-mb="{minfdsfds.fsdafsa}">[创建时间]</span>'
            ;                 
 

 $('#theTarea').html(mbhtml);

  $('#theTarea').delegate('span', 'click', function() {

      var $this = $(this);
      var value = $this.attr('data-mb');

      $this.addClass('hover').siblings().removeClass('hover');
      
      $('#textarea').append(value);      

  }); 

</script>
<style type="text/css">  
 .form-group label { font-size: 12px; font-weight: normal; }
 .theTarea { height: 34px;  font-size: 0 }
 .theTarea > span { display: inline-block; padding: 0 15px;border: 1px solid #ccc; margin:0 0 0 -1px; line-height: 34px; font-size: 12px; border-right: 1px solid #ccc; cursor: pointer; }
 .theTarea > span:nth-child(0) {margin:0;}
 .theTarea > span.hover,.theTarea > span:hover { background-color:#f1f9f9  }
</style>


